<template>
  <div class="app">
    <router-view/>
    <van-nav-bar
    title="新增地址"
    left-text="返回"
    right-text="..."
    left-arrow
    @click-left="$router.go(-1)"
      />

    <!-- <span>联系人</span> -->
    <van-form validate-first @submit="add()">
  <!-- 校验姓名 -->
  <van-field
    v-model="value1"
    name="pattern"
    placeholder="姓名"
    label="联系人"
    :rules="[{ pattern, message: '姓名格式不正确' }]"
  />
  <p class="biao">
    <span class="sex man">男</span><span class="sex">女</span>
  </p>
    
  <!-- 校验手机号码 -->
  <van-field
    v-model="value2"
    name="validator"
    placeholder="手机号码"
    label="电话"
    :rules="[{ phonenumber, message: '请输入正确的手机号码' }]"
  />
  
  <!-- 校验收货地址 -->
  <van-field
    v-model="value3"
    name="validator"
    placeholder="选择收货地址"
    label="地址"
    :rules="[{ address, message: '请选择正确的收货地址' }]"
  />
  <van-field
    v-model="value4"
    name="validator"
    placeholder="例：5号楼203室"
    label="门牌号"
    :rules="[{ address, message: '请选择正确的收货地址' }]"
  />
  <p class="biao">
    <span class="title">标签</span>
    <span class="sex">家</span>
    <span class="sex school">学校</span>
    <span class="sex">公司</span>
  </p>
  <!-- 通过 validator 进行异步函数校验 -->
  <!-- <van-field
    v-model="value3"
    name="asyncValidator"
    placeholder="异步函数校验"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  /> -->
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">保存并使用</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { address_add } from '../utils/service'
  import{Toast} from 'vant'
  import {mapMutations,mapState} from 'vuex'
export default {
    data() {
    return {
      value1: '',//联系人
      value2: '',//联系方式
      value3: '',//收货地址
      value4:'',//门牌号
      pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
      phonenumber:/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
      address:/^浙江|上海|北京|天津|重庆|黑龙江|吉林|辽宁|内蒙古|河北|新疆|甘肃|青海|陕西|宁夏|河南|山东|山西|安徽|湖北|湖南|江苏|四川|贵州|云南|广西|西藏|江西|广东|福建|台湾|海南|香港|澳门$/
    };
  },
  methods:{
    ...mapMutations(['add_address']),
    add(){
        if(this.value1==""||this.value2==""||this.value3==""||this.value4==""){
            Toast.fail("输入框不能为空")
        }else{
            var userid = JSON.parse(localStorage.getItem('userinfo')).id
            address_add({userid,address:this.value3,phone:this.value2,name:this.value1}).then((res)=>{
                if(res.data.code==200){
                    this.add_address(res.config.data)
                    this.$router.push('/address')
                }
            })
        }
    }
  },
  computed:{
...mapState(['addresslist'])
  }

}
</script>

<style scoped>
.sex {
    display: inline-block;
    font-size: 13px;
    padding: 2px 20px;
    border: 1px solid #c8c9cc;
    border-radius: 4px;
}
.man {
    margin: 0 10px 0 112px;
}
.biao {
    padding: 8px 0;
}
.title {
    color: #555;
    font-size: 14px;
    margin: 0 66px 0 16px;
}
.school {
    margin: 0 16px;
}
</style>